<!DOCTYPE html>
<div class="p1"><div class="shadow"></div></div>
<div class="p2"><div class="shadow"></div></div>
<div class="p3"><div class="p4"><div class="shadow"></div></div></div>
<style>
.shadow {
  width: 100px;
  height: 100px;
  box-shadow: 100px 0px currentColor;
}
.p1 { color: rgb(255, 0, 0); }
.p2 { color: rgb(0, 255, 0); }
.p3 { color: rgb(0, 0, 0); }
.p3 { color: rgb(0, 0, 255); }
</style>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
test(function () {
  var p1 = document.querySelector('.p1 .shadow')
  var p2 = document.querySelector('.p2 .shadow')
  var p3 = document.querySelector('.p3 .shadow')

  assert_equals(getComputedStyle(p1)['box-shadow'], 'rgb(255, 0, 0) 100px 0px 0px 0px')
  assert_equals(getComputedStyle(p2)['box-shadow'], 'rgb(0, 255, 0) 100px 0px 0px 0px')
  assert_equals(getComputedStyle(p3)['box-shadow'], 'rgb(0, 0, 255) 100px 0px 0px 0px')
}, "Check that currentColor in a box-shadow is resolved to the correct color");
</script>
